<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>借钱贷</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
        body,html{
          background: #f3f3f3;
        }
        .wrap-login-box{
          width: 100%;
          background: #f3f4f4 url(../../image/audit/loginback.jpg) no-repeat top center;
          background-size: 100%;
          overflow: hidden;
        }
        .logo{
          width: 117.5px;
          height: 117.5px;
          margin-top: 65px;
          margin-left: 50%;
          transform: translateX(-50%);
        }
        .login-box{
          margin: 25px 15px;
          padding: 36px 16px 18px 16px;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
        }
        .input-box{
          position: relative;
          height: 52px;
          margin-bottom: 16px;
          padding-left: 30px;
          border-radius: 26px;
          background: #f5f5f5;
          overflow: hidden;
        }
        .input-box input{
          display: block;
          width: 100%;
          height: 52px;
          /*padding: 19px 0;*/
          font-size: 14px;
          line-height: 52px;
          background: transparent;
        }
        .send-code{
          display: block;
          height: 32px;
          padding-left: 12px;
          margin-top: 10px;
          position: absolute;
          right: 16px;
          top: 0;
          border-left: #fcbb12 solid 0.5px;
          font-size: 16;
          line-height: 32px;
          color: #fcbb12;
        }
        .login-btn{
          height: 52px;
          margin-top: 30px;
          border-radius: 26px;
          background: -webkit-linear-gradient(left, #fcba13, #fce604);
          background: -o-linear-gradient(left, #fcba13, #fce604);
          background: linear-gradient(to right, #fcba13, #fce604);
          font-size: 16px;
          color: #fff;
          line-height: 52px;
          text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap-login-box" id="login" v-cloak>
        <img class="logo" src="../../image/audit/logo.png">
        <div class="login-box">
            <div class="input-box">
                <input type="number" placeholder="请输入手机号码" v-model="phone" maxlength="11">
            </div>
            <div class="input-box">
                <input type="number" placeholder="请输入验证码" v-model="code">
                <span class="send-code" @click="senCode">{{codeText}}</span>
            </div>
            <div class="login-btn" @click="Login">立即登录</div>
        </div>
    </div>
</body>
<script src="../../script/aui-dialog.js"></script>
<script src="../../script/api.js"></script>
<script>
apiready = function() {
    api.refreshHeaderLoadDone()
    // 再点一次退出应用
    api.setStatusBarStyle({
        style: 'dark'
    });
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {
        api.toast({
            msg: '再点一次退出应用',
            duration: 2000,
            location: 'bottom'
        });
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWidget({
                silent: true
            });
        });
        setTimeout(function() {
            exitApp();
        }, 2000)
    });

};
var dialog = new auiDialog();
var vm = new Vue({
    el: '#login',
    data: {
        phone: '',
        code: '4721',
        codeText: '发送验证码',
    },
    methods: {
        senCode: function() {
            var that = this
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (that.phone === '') {
                $api.confirm('请输入手机号码')
                return false
            } else if (!myreg.test(that.phone)) {
                $api.confirm('请输入有效的手机号码')
                return false
            }
            $api.confirm('验证码已发送到手机')
        },
        Login: function() {
            var that = this
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (that.phone === '') {
                $api.confirm('请输入手机号码')
                // dialog.alert({
                //     title:"弹出提示",
                //     msg:'这里是内容',
                //     buttons:['取消','确定']
                // })
                return false
            } else if (!myreg.test(that.phone)) {
                $api.confirm('请输入有效的手机号码')
                return false
            }
            if (that.code === '') {
                $api.confirm('请输入验证码')
                return false
            }
            if (that.phone !== '18973245690') {
                $api.confirm('账号错误')
                return false
            }
            if (that.code !== '4721') {
                $api.confirm('验证码错误')
                return false
            }
            api.openWin({
                name: 'home',
                url: 'home.html'
            });
        }
    },
    mounted: function() {

    }
})
</script>
<style>
</style>

</html>